import {defineComponent,ref,reactive,toRaw} from 'vue'
import loginBack  from '../../assets/login-bg.jpg'
import logoContainer from '../../components/logo-container.vue'
import  defHttp  from '../../util/http/axios/Axios'
import {useRouter} from 'vue-router'
export default defineComponent({
   components:{
    logoContainer
   },
    setup(){
        let spinning = false
        const formRef = ref();
        const {push} = useRouter();
        const formState = reactive({
          name: undefined,
          password: undefined
          
        });
        const rules = {
          name: {
            required: true,
            message: 'Please input name',
          },
          password:{
            required: true,
            message: 'Please input password',
          }
          
        };
        const onSubmit = () => {
            formRef.value
              .validate()
              .then(() => {
                console.log('values', formState, toRaw(formState));
              }).catch(error => {
                console.log('error', error);
              });
              push("/grapher");
              // defHttp.get({url:'/ping'}).then((data)=>{
              //   console.log(data);
              // })
          };
          const resetForm = () => {
            formRef.value.resetFields();
          };

        return {
            spinning,
            loginBack,
            formRef,
            labelCol: {
              span: 4,
            },
            wrapperCol: {
              span: 18,
              offset: 1
            },
            formState,
            rules,
            onSubmit,
            resetForm,}
    }
})
